<template>
  <div class="vuexStore">
    <Top />
    <Etable />
  </div>
</template>

<script>
import Etable from "./components/Etable"
import Top from "./components/Top"
import api from "@/api/mock"
import store from "@/store"
import tableStore from "./store"
import { mapMutations } from "vuex"

export default {
  components: {
    Etable,
    Top,
  },
  data() {
    return {}
  },
  methods: {
    ...mapMutations("tableStore", ["updateTableSetting"]),
    async init() {
      let res = await api.vuexInitQuery()
      this.updateTableSetting(res.column)
      //   console.log("vuexInitQuery_res", res);
    },
  },
  beforeCreate() {
    store.registerModule("tableStore", tableStore)
  },
  async created() {
    await this.init()
  },
  destroyed() {
    store.unregisterModule("tableStore")
  },
}
</script>

<style lang="less">
.vuexStore {
  font-size: 16px;
}
</style>
